<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长难句训练 - 乐考无忧</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
    <script src="assets/js/jquery-3.6.0.min.js"></script>
    <style>
        body {
            background-color: #f0f9f9;
            padding-bottom: 70px;
        }
        .header {
            padding: 15px;
            background: white;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .sentence-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .sentence-text {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 20px;
        }
        .analysis-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-top: 15px;
            display: none;
        }
        .npc-analysis {
            margin: 15px 0;
        }
        .npc-item {
            margin-bottom: 10px;
            padding: 10px;
            background: white;
            border-radius: 6px;
        }
        .npc-label {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.9rem;
            margin-right: 8px;
        }
        .noun-label {
            background: #FFE4E1;
            color: #FF6B6B;
        }
        .phrase-label {
            background: #E0FFFF;
            color: #4A90E2;
        }
        .clause-label {
            background: #E6E6FA;
            color: #9B59B6;
        }
        .translation {
            color: #666;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed #ddd;
        }
        .structure-analysis {
            margin: 15px 0;
            padding: 10px;
            background: white;
            border-radius: 6px;
        }
        .bottom-tools {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: white;
            padding: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
        .progress-bar {
            height: 4px;
            margin-bottom: 15px;
        }
        .btn-next {
            background: #40e0d0;
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 20px;
        }
        .btn-next:hover {
            background: #3bcdc0;
        }
        .highlight-noun { background-color: rgba(255, 107, 107, 0.2); }
        .highlight-phrase { background-color: rgba(74, 144, 226, 0.2); }
        .highlight-clause { background-color: rgba(155, 89, 182, 0.2); }
        .analysis-toolbar {
            background: white;
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 15px;
            display: flex;
            gap: 10px;
        }
        
        .tool-btn {
            padding: 8px 15px;
            border-radius: 20px;
            border: 1px solid #ddd;
            background: white;
            font-size: 0.9rem;
            cursor: pointer;
            text-align: center;
        }
        
        .tool-btn.active {
            background: #40e0d0;
            color: white;
            border-color: #40e0d0;
        }

        .sentence-text span {
            cursor: pointer;
            padding: 0 2px;
            border-radius: 3px;
        }

        .sentence-text span.selected {
            background-color: rgba(255, 255, 255, 0.3);
            border: 1px dashed #666;
        }

        .sentence-text span.noun {
            background-color: rgba(255, 107, 107, 0.2);
        }

        .sentence-text span.phrase {
            background-color: rgba(74, 144, 226, 0.2);
        }

        .sentence-text span.clause {
            background-color: rgba(155, 89, 182, 0.2);
        }

        .check-answer-btn {
            background: #40e0d0;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            margin-top: 15px;
            width: 100%;
        }

        .selection-tip {
            background: #f8f9fa;
            padding: 10px 15px;
            border-radius: 8px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
        <a href="index.html" class="text-dark"><i class="bi bi-chevron-left fs-4"></i></a>
        <h5 class="mb-0 mx-auto">长难句训练</h5>
    </div>

    <!-- 句子卡片 -->
    <div class="sentence-card">
        <!-- NPC分析工具栏 -->
        <div class="analysis-toolbar">
            <button class="tool-btn" data-type="noun">名词短语</button>
            <button class="tool-btn" data-type="phrase">动词短语</button>
            <button class="tool-btn" data-type="clause">从句</button>
            <button class="tool-btn" data-type="clear">清除</button>
        </div>

        <!-- 添加提示信息 -->
        <div class="selection-tip mb-3 text-muted">
            <i class="bi bi-info-circle"></i>
            请先选择要标记的类型，然后点击句子中的单词进行标记
        </div>

        <div class="sentence-text" id="practiceText">
            Despite the controversy surrounding its implementation, the new policy that aims to reduce carbon emissions has gained support from environmental groups worldwide.
        </div>

        <button class="check-answer-btn">检查答案</button>

        <!-- 答案解析部分 -->
        <div class="analysis-section">
            <h6 class="mb-3">NPC分析</h6>
            <div class="npc-analysis">
                <div class="npc-item">
                    <span class="npc-label noun-label">名词短语</span>
                    the new policy - 这项新政策（主语）
                </div>
                <div class="npc-item">
                    <span class="npc-label phrase-label">动词短语</span>
                    has gained support - 获得了支持（谓语）
                </div>
                <div class="npc-item">
                    <span class="npc-label clause-label">定语从句</span>
                    that aims to reduce carbon emissions - 旨在减少碳排放
                </div>
            </div>

            <div class="structure-analysis">
                <h6 class="mb-2">句子结构</h6>
                <p>主干：the new policy has gained support</p>
                <p>修饰语：</p>
                <ul>
                    <li>Despite the controversy... (让步状语)</li>
                    <li>that aims to... (定语从句修饰policy)</li>
                    <li>from environmental groups worldwide (介词短语)</li>
                </ul>
            </div>

            <div class="translation">
                <h6 class="mb-2">参考译文</h6>
                <p>尽管其实施存在争议，这项旨在减少碳排放的新政策还是获得了全球环保组织的支持。</p>
            </div>
        </div>
    </div>

    <!-- 底部工具栏 -->
    <div class="bottom-tools">
        <div class="progress progress-bar">
            <div class="progress-bar bg-success" style="width: 30%"></div>
        </div>
        <div class="d-flex justify-content-between align-items-center">
            <div class="text-muted">3/10</div>
            <button class="btn-next">
                下一句 <i class="bi bi-arrow-right"></i>
            </button>
        </div>
    </div>

    <script>
        function toggleAnalysis(btn) {
            const analysisSection = btn.previousElementSibling;
            if (analysisSection.style.display === 'none' || !analysisSection.style.display) {
                analysisSection.style.display = 'block';
                btn.textContent = '收起分析';
            } else {
                analysisSection.style.display = 'none';
                btn.textContent = '查看分析';
            }
        }

        // 点击下一句按钮的处理
        document.querySelector('.btn-next').addEventListener('click', function() {
            // 这里可以添加加载下一句的逻辑
            location.reload(); // 临时使用刷新页面模拟
        });

        $(document).ready(function() {
            let currentTool = null;
            let isSelecting = false;
            let startWord = null;

            // 初始化句子，将每个单词包装在span中
            function initializeText() {
                const text = $('#practiceText').text().trim();
                const words = text.split(/\s+/);
                const wrappedText = words.map(word => `<span class="word">${word}</span>`).join(' ');
                $('#practiceText').html(wrappedText);
            }

            // 工具按钮点击事件
            $('.tool-btn').click(function() {
                const type = $(this).data('type');
                
                if (type === 'clear') {
                    $('#practiceText .word').removeClass('selected noun phrase clause');
                    $('.tool-btn').removeClass('active');
                    currentTool = null;
                    return;
                }

                $('.tool-btn').not(this).removeClass('active');
                $(this).toggleClass('active');
                currentTool = $(this).hasClass('active') ? type : null;
                
                // 更新提示信息
                updateSelectionTip();
            });

            function updateSelectionTip() {
                const tip = $('.selection-tip');
                if (currentTool) {
                    const typeText = {
                        noun: '名词短语',
                        phrase: '动词短语',
                        clause: '从句'
                    }[currentTool];
                    tip.html(`<i class="bi bi-info-circle"></i> 请点击句子中的单词标记${typeText}`);
                } else {
                    tip.html(`<i class="bi bi-info-circle"></i> 请先选择要标记的类型，然后点击句子中的单词进行标记`);
                }
            }

            // 单词点击事件
            $('#practiceText').on('mousedown', '.word', function(e) {
                if (!currentTool) return;
                
                isSelecting = true;
                startWord = this;
                $(this).addClass('selected');
                e.preventDefault();
            });

            $('#practiceText').on('mousemove', '.word', function(e) {
                if (!isSelecting) return;
                
                const words = $('#practiceText .word');
                const start = words.index(startWord);
                const current = words.index(this);
                
                words.removeClass('selected');
                const range = [Math.min(start, current), Math.max(start, current)];
                words.slice(range[0], range[1] + 1).addClass('selected');
            });

            $(document).on('mouseup', function() {
                if (!isSelecting) return;
                
                $('#practiceText .selected').removeClass('selected').addClass(currentTool);
                isSelecting = false;
            });

            // 检查答案按钮点击事件
            $('.check-answer-btn').click(function() {
                $('.analysis-section').slideDown();
                // 这里可以添加答案比对逻辑
            });

            // 初始化
            initializeText();
            updateSelectionTip();
        });
    </script>
</body>
</html>
